import { Button, Flex, Form, Input, Switch, TreeSelect, Radio } from 'antd'
import { useRef, useState } from 'react'
import type { RadioChangeEvent } from 'antd'

type MenuFormProps = {
  onClose: () => void
}
const FormView: React.FC<MenuFormProps> = (props: any) => {
  const [form] = Form.useForm()
  const [radioValue, setRadioValue] = useState(1)

  const onRadioChange = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value)
    setRadioValue(e.target.value)
  }
  return <Form form={form} labelAlign="right" labelCol={{ span: 6 }}>
    <Form.Item label="菜单类型" name="usetype" rules={[{ required: true }]}>
      <Radio.Group onChange={onRadioChange} value={radioValue}>
        <Radio value={1}>系统类</Radio>
        <Radio value={2}>业务类</Radio>
      </Radio.Group>
    </Form.Item>
    <Form.Item label="字典标识" name="use" rules={[{ required: true, message: '请输入字典标识' }]}>
      <Input placeholder="请输入字典标识" maxLength={50} />
    </Form.Item>
    <Form.Item label="字典名称" name="use1" rules={[{ required: true, message: '请输入字典名称' }]}>
      <Input placeholder="请输入字典名称" maxLength={50} />
    </Form.Item>
    <Form.Item label="字典描述" name="use3" rules={[{ required: true, message: '请输入字典描述' }]}>
      <Input placeholder="请输入字典描述" maxLength={50} />
    </Form.Item>
    <Form.Item>
      <Flex justify="center" align="center">
        <Button type="primary" htmlType="submit">提交</Button>
        <Button style={{ marginLeft: 10 }} onClick={props.onClose}>返回</Button>
      </Flex>
    </Form.Item>
  </Form>
}

export default FormView